<template>
  <div class="">
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="设备信息" name="1">
        <div class="content-wrap">
          <TowerCraneInfo v-if="activeName == 1" ref="TowerCraneInfoRef" />
        </div>
      </el-tab-pane>
      <el-tab-pane label="设备列表" name="2">
        <div class="content-wrap">
          <TowerCraneList ref="TowerCraneListRef" @itemInfo="addTowerCraneInfo" />
        </div>
      </el-tab-pane>
    </el-tabs>

    <div class="button_box">
      <el-button type="text" plain icon="el-icon-refresh" @click="onRefreshClick">刷新</el-button>
      <el-button
        type="text"
        plain
        icon="el-icon-circle-plus-outline"
        v-if="activeName == 2"
        @click="addTowerCraneInfo(null)"
      >添加设备</el-button>
    </div>

    <AddTowerCraneInfo ref="AddTowerCraneInfoRef" />
  </div>
</template>

<script>
  import TowerCraneInfo from "./tower-crane/TowerCraneInfo";
  import TowerCraneList from "./tower-crane/TowerCraneList";
  import AddTowerCraneInfo from "./tower-crane/module/AddTowerCraneInfo";
  import httpInterface from "../../util/httpInterface";
  import { mapActions } from "vuex";

  export default {
    name: "TowerCrane",
    components: {
      TowerCraneInfo, TowerCraneList, AddTowerCraneInfo
    },
    data() {
      return {
        activeName: '1'
      }
    },
    created() {
      httpInterface.getUserInfo(() => {
        this.onRefreshClick();
        this.getTendersInfo();
      })
    },
    methods: {
      ...mapActions(["getTendersInfo"]),

      handleClick() {
        this.onRefreshClick();
      },

      onRefreshClick() {
        switch(this.activeName) {
          case "1":
            this.$nextTick(() => {
              this.$refs.TowerCraneInfoRef.getTowerCraneInfo();
            })
            break;
          case "2":
            this.$refs.TowerCraneListRef.getTowerInfo();
            break;
        }
      },

      addTowerCraneInfo(data) {
        this.$refs.AddTowerCraneInfoRef.show(data);
      }
    }
  }
</script>

<style scoped lang="scss">
  .content-wrap{
    padding: 80px 20px 20px 20px;
    box-sizing: border-box;
    height: 100vh;
  }
</style>
